<template>
  <div class="user-dynamic-modal">
    <div v-if="firstLoading" style="background: #fff; padding: 20px">
      <a-skeleton active />
    </div>
    <client-only v-else>
      <div
        v-if="!pagination.list.length"
        style="padding: 30px 0; background: #fff"
      >
        <a-empty
          description="暂无数据"
          :image="require('~/assets/images/nodata.png')"
        />
      </div>
      <div v-else>
        <div
          v-for="item in pagination.list"
          :key="item.id"
          class="content-block"
        >
          <!-- 文章模块展示 -->
          <div v-if="item.articleId" class="articlelist-content">
            <div class="dynamic-title">
              <em>{{ cycleDate(item.createTime) }}</em>
              <span>{{ userNickname }}</span>
              {{ item.type === '1' ? '发布' : item.type === '2' ? '赞' : '收藏' }}了这篇文章
            </div>
            <div class="model" @click="openLink(item.articleId)">
              <div class="l">
                <div class="user-info">
                  <p @click.stop>
                    <nuxt-link
                      target="_blank"
                      :to="`/user/${item.pointInfo?.userId}`"
                      >{{ item.pointInfo?.nickname }}</nuxt-link
                    >
                  </p>
                  <p>{{ cycleDate(item.pointInfo?.createTime) }}</p>
                  <p>
                    <em
                      v-for="itemName in item.pointInfo?.tag.split(';')"
                      :key="itemName"
                      >{{ tagMap[itemName] || itemName }}</em
                    >
                    <em class="category-name">{{ categoryMap[item.pointInfo?.category] }}</em>
                  </p>
                  <div class="status" v-if="item.pointInfo.status !== '2'">{{ item.pointInfo.status === '1' ? '待审核' : '审核不通过' }}</div>
                </div>
                <p class="article-title">{{ item.pointInfo?.articleTitle }}</p>
                <p class="article-desc">{{ item.pointInfo?.description }}</p>
                <div class="a-num">
                  <p>
                    <a-icon type="eye" /><span>{{
                      item.pointInfo?.viewCounts
                    }}</span>
                  </p>
                  <p
                    :class="{ 'is-liker': item.pointInfo?.isLiker }"
                    @click.stop="isLikeArticle(item.pointInfo)"
                  >
                    <i class="ri-thumb-up-line"></i>
                    <span v-if="item.pointInfo?.likeCounts">{{
                      item.pointInfo?.likeCounts
                    }}</span>
                  </p>
                  <p>
                    <i class="ri-message-ai-3-line"></i>
                    <span v-if="item.pointInfo?.commentCounts">{{
                      item.pointInfo?.commentCounts
                    }}</span>
                  </p>
                </div>
              </div>
              <div v-if="item.pointInfo?.coverImage" class="r">
                <img :src="item.pointInfo?.coverImage" alt="cover-image" />
              </div>
            </div>
          </div>

          <!-- 友圈模块展示 -->
          <div v-if="item.circleId" class="circle-content-block">
            <div class="dynamic-title">
              <em>{{ cycleDate(item.createTime) }}</em>
              <span>{{ userNickname }}</span>
              {{
                item.type === '1' ? '发布' : item.type === '2' ? '赞' : '收藏'
              }}了这篇友圈分享
            </div>
            <div class="share-block">
              <div class="top">
                <HeadAvatar
                  :to="`/user/${item.pointInfo?.userId}`"
                  :img="item.pointInfo?.avatar"
                />
                <div class="right-info">
                  <p class="nickname">
                    <nuxt-link
                      target="_blank"
                      :to="`/user/${item.pointInfo?.userId}`"
                      >{{ item.pointInfo?.nickname }}</nuxt-link
                    >
                  </p>
                  <p class="desc">
                    <span v-if="item.pointInfo?.job"
                      >{{ item.pointInfo?.job }} · </span
                    >{{ cycleDate(item.pointInfo?.createTime) }}
                  </p>
                  <p class="share-info">{{ item.hasLimit && item.toggle ? item.limitContent : item.pointInfo?.content }}</p>
                  <div
                    class="limit-box"
                    v-if="item.hasLimit">
                    <span @click="item.toggle = !item.toggle">{{ item.toggle ? '展开' : '收起' }}</span>
                  </div>
                  <div
                    v-if="
                      item.pointInfo?.picList && item.pointInfo?.picList.length
                    "
                    class="img-box"
                  >
                    <div
                      v-for="itemName in item.pointInfo?.picList.split(';')"
                      :key="itemName"
                      class="share-img"
                      @click="handlePreview({ url: itemName })"
                    >
                      <img :src="itemName" alt="shareImg" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div>
                  <nuxt-link
                    target="_blank"
                    :to="`/sharecircle/${item.pointInfo?.id}`"
                  >
                    <i class="ri-message-ai-3-line"></i>
                    <span v-if="item.pointInfo?.commentCount">{{
                      item.pointInfo?.commentCount
                    }}</span>
                  </nuxt-link>
                </div>
                <div
                  :class="{ like: item.pointInfo?.isLiker }"
                  @click="isLikeCircle(item.pointInfo)"
                >
                  <i class="ri-thumb-up-line"></i>
                  <span v-if="item.pointInfo?.agreeCount">{{
                    item.pointInfo?.agreeCount
                  }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 用户关注模块 -->
          <div v-if="item.focusUserId" class="user-focus-content">
            <div class="focus-user">
              <div class="user-modal">
                <HeadAvatar :img="userAvatar" />
                <p class="nickname">
                  {{ userNickname }}
                  <span>关注了</span>
                  <nuxt-link
                    target="_blank"
                    :to="`/user/${item.pointInfo?.id}`"
                    >{{ item.pointInfo?.nickname }}</nuxt-link
                  >
                </p>
              </div>
            </div>
          </div>

          <!-- 用户收藏工具 -->
          <div class="user-collect-tool" v-if="item.toolId">
            <HeadAvatar :img="userAvatar" />
            <p class="nickname">{{ userNickname }}</p>
            <span>收藏工具</span>
            <a class="tool-info" :href="item.pointInfo.url" target="_blank">
              <img :src="item.pointInfo.logo || require('~/assets/images/folder.png')" alt="" class="logo">
              <em class="name">{{ item.pointInfo.name }}</em>
            </a>
            <p class="create-time">{{ cycleDate(item.createTime) }}</p>
          </div>
        </div>
      </div>
    </client-only>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { cycleDate } from '~/util'
import userMixin from '~/mixin/user'
import { tagMap, categoryMap } from '~/config/optionMap'
import ScrollLoadEvent from '~/util/scrollLoadEvent'
export default {
  name: 'UserDynamic',
  mixins: [userMixin],
  data () {
    return {
      cycleDate,
      tagMap,
      categoryMap
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },

  created () {
    this.findUserActionList('/gimishare/api/v1/dynamics')
  },

  mounted () {
    this.scrollLoadEvent = new ScrollLoadEvent(
      this.findUserActionList.bind(this, '/gimishare/api/v1/dynamics', true)
    )
    this.$nextTick(() => {
      this.scrollLoadEvent.bindScrollEvent()
    })
  },

  methods: {
    /**
     * article liker
     * @param { Object } articleItem
     */
    async isLikeArticle (articleItem) {
      if (!this.userInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      try {
        const API = articleItem.isLiker
          ? '/users/unagreearticle'
          : '/users/agreearticle'
        await this.$axios.get(`/gimishare/api/v1${API}?articleId=${articleItem.id}&uid=${articleItem.userId}`)
        if (articleItem.isLiker) {
          articleItem.likeCounts -= 1
        } else {
          articleItem.likeCounts += 1
        }
        articleItem.isLiker = !articleItem.isLiker
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * user like or unlike sharecircle
     * @param { Object } circleItem
     */
    async isLikeCircle (circleItem) {
      if (!this.userInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      try {
        const API = circleItem.isLiker ? '/shares/unagree' : '/shares/agree'
        await this.$axios.get(`/gimishare/api/v1${API}?id=${circleItem.id}&uid=${circleItem.userId}`)
        if (circleItem.isLiker) {
          circleItem.agreeCount -= 1
        } else {
          circleItem.agreeCount += 1
        }
        circleItem.isLiker = !circleItem.isLiker
      } catch (error) {}
    },

    handlePreview (file) {
      this.$store.commit('UPDATE_PREVIEW_IMGSRC', file.url)
    },

    openLink (id) {
      const { href } = this.$router.resolve(`/post/${id}`)
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="less">
.user-dynamic-modal {
  padding-bottom: 30px;
  .content-block {
    margin-top: 10px;
    border-radius: 2px;
    overflow: hidden;
    .articlelist-content {
      .model {
        &:hover {
          background: #fff;
        }
      }
    }
    .dynamic-title {
      line-height: 42px;
      border-bottom: 1px solid #f1f1f1;
      padding: 0 20px;
      background: #fff;
      font-size: 12px;
      em {
        font-style: normal;
        margin-right: 6px;
      }
      span {
        color: #999;
        margin-right: 4px;
      }
    }
    .share-block {
      margin-bottom: 0;
    }
    .user-focus-content {
      .focus-user {
        background: #fff;
        .user-modal {
          border-bottom: 1px solid #f1f1f1;
          display: flex;
          height: 60px;
          align-items: center;
          padding: 0 20px;
          .nickname {
            font-size: 14px;
            margin-left: 14px;
            font-weight: bold;
            flex: 1;
            width: 0;
            color: #000;
            span {
              color: #999;
              margin: 0 6px;
            }
            em {
              font-style: normal;
            }
            a {
              color: var(--primary-color);
            }
          }
        }
      }
    }
    .user-collect-tool {
      background-color: #fff;
      display: flex;
      padding: 10px 20px;
      align-items: center;
      .nickname {
        color: #000;
        font-size: 14px;
        font-weight: 600;
        margin-left: 8px;
      }
      & > span {
        margin: 0 16px 0 10px;
        font-size: 12px;
        color: #999;
      }
      .tool-info {
        font-size: 0;
        display: flex;
        align-items: center;
        .logo {
          width: 32px;
          height: 32px;
          object-fit: cover;
        }
        .name {
          color: #333;
          font-size: 12px;
          font-style: normal;
          margin-left: 2px;
        }
      }
      .create-time {
        margin-left: auto;
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>
